import * as React from "react";
import { message, Modal } from "antd";
import FormRender from "form-render/lib/antd";
import { cloneDeep } from "lodash";
import { addPriceData, updatePriceData } from "../../../ServeApi";
import { AjaxData } from "../../../../../../data/interface/publicInterface";
import { schema } from "./from.json";
export interface PriceFileModalProps {
  visible: boolean;
  onOk: (data: boolean) => any;
  onCancel: (data: boolean) => any;
  defaultValue?: any;
}

export interface PriceFileModalState {
  visible: boolean;
  formData: PriceData | {};
  valid: string[];
  fromPass: boolean;
}

class PriceFileModal extends React.Component<
  PriceFileModalProps,
  PriceFileModalState
> {
  state = {
    visible: false,
    fromPass: false,
    formData: {},
    valid: [],
  };

  render() {
    return (
      <Modal
        title={this.props.defaultValue ? "编辑价格" : "新增价格"}
        className="PriceFileModal"
        visible={this.state.visible}
        onOk={() => {
          this.handleOk();
        }}
        onCancel={() => {
          this.handleCancel();
        }}
      >
        <FormRender
          schema={schema}
          formData={this.state.formData}
          onChange={(formData: PriceData) => {
            this.setState({ formData });
          }}
          onValidate={(valid: string[]) => {
            this.setState({ valid });
          }}
          showValidate={this.state.fromPass}
        />
      </Modal>
    );
  }
  shouldComponentUpdate(
    newProps: PriceFileModalProps,
    newState: PriceFileModalState
  ) {
    if (newProps.visible !== this.props.visible) {
      this.setState({ visible: newProps.visible });
      if (newProps.defaultValue) {
        console.log(newProps.defaultValue);
        let defaultValue = cloneDeep(newProps.defaultValue);
        defaultValue.isEnable = defaultValue.isEnable === "0" ? true : false;

        this.setState({ formData: defaultValue });
      }
    }

    return true;
  }
  handleOk() {
    this.onSubmit();
  }
  handleCancel() {
    this.props.onCancel(false);
    this.clearState();
  }
  clearState() {
    this.setState({
      fromPass: false,
      formData: {},
      valid: [],
    });
  }
  //提交校验
  onSubmit = () => {
    // valid 是校验判断的数组，valid 长度为 0 代表校验全部通过

    let { valid, formData } = this.state;
    if (valid.length > 0) {
      message.error(`校验未通过,请检查字段输入`);
    } else {
      this.setState({ fromPass: true });
      if (this.props.defaultValue) {
        console.log("编辑");
        this.updatePriceData(formData);
      } else {
        this.addPriceData(formData);
        console.log("新增");
      }
    }
  };
  //新增
  async addPriceData(item: PriceData | {}) {
    let pream = cloneDeep(item);
    pream.isEnable = pream.isEnable ? "0" : "1";
    try {
      let res: any = await addPriceData(JSON.stringify(pream));
      let json: AjaxData = res;
      if (json.success) {
        this.props.onOk(false);
        this.clearState();
      }
    } catch (error) {}
  }
  //编辑更新
  async updatePriceData(item: PriceData | {}) {
    let pream = cloneDeep(item);
    pream.isEnable = pream.isEnable ? "0" : "1";
    pream.id = this.props.defaultValue.id;

    try {
      let res: any = await updatePriceData(JSON.stringify(pream));
      let json: AjaxData = res;
      if (json.success) {
        this.props.onOk(false);
        this.clearState();
      }
    } catch (error) {}
  }
}
interface PriceData {
  id?: string;
  priceType: string;
  name: string;
  unitPrice: number;
  jprice: number | string;
  fprice: number | string;
  pprice: number | string;
  gprice: number | string;
  isEnable: string;
}
export default PriceFileModal;
